<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-06-30 14:52:11
 * @Descripttion: 公共信息
--> 
<template>
  <div class="app-container">
    <div class="head-container">
      <!--工具栏-->
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="query.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getAnnouncement">搜 索</el-button>
          <el-button size="mini" @click="clear">清 除</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col>
          <el-button class="margin—buttom-18" size="mini" type="primary" icon="el-icon-plus" @click="addDepartment">
            新增
          </el-button>
          <el-button class="margin—buttom-18" style="margin-left: 10px; !important" size="mini" type="success" icon="el-icon-edit" :disabled="checkedList.length!==1" @click="editDepartment">
            修改
          </el-button>
          <el-button class="margin—buttom-18" style="margin-left: 10px; !important" size="mini" type="danger" icon="el-icon-delete" :disabled="checkedList.length==0" @click="doDelete">
            删除
          </el-button>
        </el-col>
      </el-row> 
    </div>
    <!--表格渲染-->
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="title" label="标题">
      </el-table-column>
      <el-table-column prop="updateTime" label="创建时间" width="180">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total= tableTotal
    ></el-pagination>
    <!--表单组件-->
    <el-dialog :visible.sync="dialogFormVisible1" :title="dialogTitle" width="800px" class="dialogStyle">
      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" style="width: 670px;" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- <el-input type="textarea" placeholder="请输入内容" v-model="form.content" :autosize="{ minRows: 6, maxRows: 18 }" style="width: 370px;">
          </el-input> -->
          <quill-editor class="editor" ref="myTextEditor" v-model="form.content" :options="editorOption">
          </quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary"  @click="submitDepartment('form')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { separateObj } from '@/utils/index'
import { apiGetSystemAnnouncement, apiPostSystemAnnouncement, apiPutSystemAnnouncement, apiDelSystemAnnouncement } from '@/api/system/announcement'

export default {
  data(){
    return{
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            // ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            // [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            // [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            // ["link", "image", "video"] // 链接、图片、视频
            ["link", "image"] // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: '请输入内容', //提示
        readyOnly: false, //是否只读
        theme: 'snow', //主题 snow/bubble
        syntax: true, //语法检测
      },
      checkedList: [],
      query: {
        title: ''
      },
      dialogTitle: '添加公告',
      dialogFormVisible1: false,
      form:{
        id: null, 
        title: null, 
        content: null
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      tableData: [],
      tableTotal: 0,
      pageIndex: 1,
      pageSize: 10
    }
  },
  created() {
    this.getAnnouncement()
  },
  methods: {
    clear(){
      this.query = { title: '' }
    },
    getAnnouncement() {
      var paramObj = { 
          title: this.query.title, 
          page: this.pageIndex,
          size: this.pageSize 
        }
      apiGetSystemAnnouncement(paramObj).then(res => {
        this.tableData = res.content
        this.tableTotal = res.totalElements;
      })
    },
    addDepartment(){
      this.dialogTitle = '添加公告'
      this.dialogFormVisible1 = true;
    },
    editDepartment(){
      this.dialogTitle = '编辑公告'
      this.form = separateObj(this.checkedList[0])
      this.dialogFormVisible1 = true;
    },
    submitDepartment(formName){
      let self = this
      let form = this.form
      let api = apiPostSystemAnnouncement
      if(form !== undefined && form.id !== null){
        api = apiPutSystemAnnouncement
      } 
      this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(JSON.stringify(form))
            api(form).then(res => {
              this.$message({
                type: 'success',
                message: '执行成功!'
              });
              this.dialogFormVisible1 = false
              location.reload()
            })
            .catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    doDelete(){
      let delList = [];
      this.checkedList.forEach(item=>{
        return delList.push(item.id)
      })
      this.$confirm(`确认删除选中的${delList.length}条数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiDelSystemAnnouncement(delList)
          .then(res => {
            this.pageIndex = 1
            this.getAnnouncement();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
          .catch(error => {
            this.$message({
              type: 'info',
              message: 'error'
            });  
          });
      }).catch();
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageIndex = val
    },
    handleSelectionChange(val) {
      this.checkedList = val;
    }
  }
}
</script>
<style scoped>
  .editor {
    line-height: normal !important;
    float: right;
    width: 670px;
    height: 300px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }
 
  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }
 
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }
 
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }
 
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }
  </style>
<style scoped>
.margin—buttom-18{
  margin-bottom: 18px !important
}
.head-container .el-button+.el-button {
  margin-left: 8px !important;
}
</style>
<style>
.dialogStyle .el-dialog{
  height: 570px
}
.dialogStyle .el-dialog__body{
  height: 450px;
}
</style>